<template>
  <div>
    <TopBar>绑定银行卡</TopBar>
    <section class="bindBankContainer"   style="margin-top:1.5rem">
      <input type="text" v-model="name" class="defaultInput" placeholder="姓名">
      <input type="text" v-model="personalID" class="defaultInput" placeholder="身份证">
      <input type="text" v-model="bank" class="defaultInput" placeholder="开户银行" @click="showBankList">
      <input type="text" v-model="bankName" class="defaultInput" placeholder="支行名称">
      <input type="number" v-model="bankNum" class="defaultInput" placeholder="银行卡号">
      <input type="text" v-model="phone" class="defaultInput" placeholder="银行手机号">
      <div id="bindBankBtn" @click="bindBank" :style="bg">绑定</div>
      <x-icon type="ios-arrow-right" size="30" @click="showBankList"></x-icon>
    </section>
    <BankList :show1="showBank" @getBank="selectBank" @close1="close1"></BankList>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import BankList from '../../component/common/BankList'
import { Popup,TransferDom } from 'vux'
import { Toast } from 'vux'
import {verify,showMsg,getStore} from '../../../config/mUtils'
import {bindBank} from '../../../service/getData'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'
let time = null;
export default {
  components:{
    TopBar,
    Popup,
    BankList,
    Toast
  },
  beforeCreate(){
    getSDK()
  },
  data(){
    return {
      name:'',
      showBank:false,
      personalID:'',
      bank:'',
      bankNum:'',
      phone:getStore('phone'),
      msg:'',
      showPositionValue:false,
      bankId:1,
      bankName:'',//支行名称
    }
  },
  methods:{
    bindBank(){
      // console.log(`${this.name}/${this.personalID}/${this.bank}/${this.bankNum}/${this.phone}/${this.bankName}`)
      // //console.log(this.name.length)
      if(this.name.length == 0){
        showMsg('姓名不能为空',this)
      }else if(this.personalID == ''){
        showMsg('身份证不能为空',this)
      }else if(this.bank == ''){
        showMsg('银行不能为空',this)
      }else if(this.bankNum == ''){
        showMsg('银行卡号不能为空',this)
      }else if(this.bankName == ''){
        showMsg('支行名称不能为空',this)
      }
      // else if(!verify(this.name,4)){
      //   showMsg("姓名格式错误",this)
      // }
      else if(!verify(this.personalID,5)){
        showMsg("身份证格式错误",this)
      }else if(!verify(this.phone,1)){
        showMsg("手机号格式错误",this)
      }else{
        bindBank(getStore('loginkey'),this.name,this.personalID,this.bankId,this.bank,this.bankNum,this.phone,this.bankName)//TODO:增加支行参数
          .then(res=>{
            if(res.status == 1){
              time = setTimeout(()=>{
                this.$router.replace('/cashManager')
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    },
    close1(data){
      this.showBank = false
    },
    showBankList(){
      if(!this.showBank){
        this.showBank = true
      }
      // this.showBank = !this.showBank
      if(this.bank == ''){
        this.bank = '中国工商银行'
      }
    },
    selectBank(data){
      // //console.log(data)
      this.bank = data.val
      this.bankId = data.bankId+1 
      // //console.log(`${this.bank}/${this.bankId}`)
    }
  },
  computed:{
    bg(){
      if(this.name.length != 0 && this.personalID.length != 0&&this.bank.length!=0&&this.phone.length!=0&&this.bankNum.length!=0){
        return 'backgroundColor:#e44c2c'
      }
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .bindBankContainer{
    .wh(85%,100%);
    margin: 0 auto;
    .defaultInput{
      .wh(100%,1.4133rem);
      outline: none;
      border: 1px solid #f6f6f6;
      border-left: none;
      border-right: none;
      border-top: none;
      font-size: 0.44rem;
    }
    #bindBankBtn{
      .wh(100%,1.1733rem);
      margin-top: 1.0933rem;
      .bg(#dedede);
      // .bg(#e44c2c);
      .borderRadius(2rem);
      text-align: center;
      line-height: 1.1733rem;
      .sc(0.44rem,#fff);
    }
    .vux-x-icon {
      fill: #dedede;
      position: absolute;
      top: 4.6rem;
      right: .8rem;
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
      width: 70% !important;
    }
</style>
